<script>
import FilterArea from "@/components/FilterArea.vue";
import ListArea from "@/components/ListArea.vue";
import mixins from "@/assets/js/mixins.js";
import FyDialog from "@/components/FyDialog.vue";

import {date} from "@/assets/util/index.js";

let dateUtil = date();

export default {
  name: "CategoryIndex",
  mixins: [mixins],
  components: {
    FyDialog,
    FilterArea,
    ListArea
  },
  data() {
    return {
      categoryFilter: {
        categoryName: ''
      },
      categoryDialogVisible: false,
      category: {
        categoryName: '',
        categoryIcon: '',
        categoryOrder: ''
      },
      categoryRules: {
        categoryName: [{
          required: true,
          message: '请输入分类名称',
          trigger: 'blur'
        }],
        categoryOrder: [{
          required: true,
          message: '请输入分类排序',
          trigger: 'blur'
        }],
        categoryIcon: [{
          required: true,
          message: '请输入分类图标',
          trigger: 'change'
        }]
      }
    }
  },
  created() {
    this.pageType = "category";
    this.loadData();
  },
  methods: {
    loadData() {
      let option = {
        pageNo: 1,
        pageSize: 10
      }
      let name = this.categoryFilter.categoryName;
      if (name) {
        option.categoryName = ['eq', name];
      }
      this.onSearch(option);
    },
    onReset() {
      this.categoryFilter.categoryName = "";
    },
    onCreated(t, v) {
      this.categoryDialogVisible = true;
    },
    showIconBox() {
      this.$nextTick(() => {
        this.$refs.iconBox.style.display = 'block';
      })
    },
    renderIconfont(iconfont) {
      this.category.categoryIcon = iconfont;
    },
    submit() {
      let id = this.category.id;
      this.$refs.categoryRef.validate(valid => {
        if (valid) {
          let method = "onSubmit"
          if(id){
            method = "onEdit";
          }
          this[method](this.category).then(res => {
            this.categoryDialogVisible = false;
            this.loadData();
          });
        }
      })
    },
    formatDate(date) {
      return dateUtil.formatDate(date, 'yyyy-MM-DD HH:mm');
    },
    _edit(id) {
      this.selectById("category", id).then(res => {
        this.category = res.data;
        this.categoryDialogVisible = true;
        window.setTimeout(() => {
          this.$refs.iconBox.style.display = 'block';
        }, 1500);
      })
    },
    _delete(id) {
      this.onDelete(id).then(res => {
        this.$message.success("删除成功");
        this.loadData();
      })
    }
  }
}
</script>

<template>
  <FilterArea @onSearch="onSearch(categoryFilter)" @onReset="onReset" v-if="showFilterArea">
    <template #inputBox>
      <div class="area flex-rcs">
        <label>分类名称</label>
        <el-input v-model="categoryFilter.name" placeholder="请输入相关分类的名称"/>
      </div>
    </template>
  </FilterArea>

  <ListArea list-url="/category/edit"
            list-title="资源分类" @create="onCreated" @handleFilter="handleFilter">
    <template #table-list>
      <el-table :data="list.tableData">
        <el-table-column label="" type="selection" width="80"></el-table-column>
        <el-table-column label="分类名称" prop="categoryName"></el-table-column>
        <el-table-column label="分类图标" prop="categoryIcon" align="center">
          <template #default="scope">
            <svg style="width:40px;height:40px;" class="icon-font">
              <use :xlink:href="'#'+scope.row.categoryIcon"></use>
            </svg>
          </template>
        </el-table-column>
        <el-table-column label="分类排序" align="center" prop="categoryOrder"></el-table-column>
        <el-table-column label="创建时间" prop="createTime">
          <template #default="scope">
            <div>{{ formatDate(scope.row.createTime) }}</div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button size="small" type="primary" @click="_edit(scope.row.id)">编辑</el-button>
            <el-button size="small" type="danger" @click="_delete(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
  </ListArea>

  <FyDialog
      v-loading="submitting"
      @close="categoryDialogVisible=false" :visible="categoryDialogVisible" :title="(category.id?'修改':'添加')+'资源分类'">
    <template #form>
      <el-form :model="category" ref="categoryRef" style="width:85%;margin:0 auto;padding:20px;" :rules="categoryRules">
        <el-form-item label="分类名称" required prop="categoryName">
          <el-input v-model="category.categoryName" placeholder="请输入分类名称"></el-input>
        </el-form-item>
        <el-form-item label="分类排序" required prop="categoryOrder">
          <el-input v-model="category.categoryOrder" placeholder="请输入分类排序"></el-input>
        </el-form-item>
        <el-form-item label="分类图标" required prop="categoryIcon">
          <el-input @focus="showIconBox" readonly v-model="category.categoryIcon"
                    placeholder="请输入分类图标"></el-input>
          <div style="display: none" ref="iconBox">
            <div class="flex-rnr icon_box">
              <div :class="'flex-cc icon '+((category.categoryIcon==='icon-tubiao-'+(i<10?('0'+i):i))?'iconActive':'') " v-for="i in 17" @click="renderIconfont('icon-tubiao-'+(i<10?('0'+i):i))"
              :title="'icon-tubiao-'+(i<10?('0'+i):i)">
                <svg class="icon-font">
                  <use :xlink:href="'#icon-tubiao-'+(i<10?('0'+i):i) "></use>
                </svg>
              </div>
            </div>
          </div>
        </el-form-item>
      </el-form>
    </template>
    <template #footer-btn>
      <div>
        <el-button class="submit_btn" @click="submit" :disabled="submitting">
          {{ submitting ? ((category.id?'修改':'提交')+'中……') : (category.id?'修 改':'提 交') }}
        </el-button>
        <el-button type="danger" @click="categoryDialogVisible=false">取消</el-button>
      </div>
    </template>
  </FyDialog>
</template>

<style lang="scss">
.icon_box {
  margin-top: 5px;

  .icon {
    height: 40px;
    cursor: pointer;
    margin-right: 5px;
    padding: 4px;

    .icon-font {
      width: 40px;
      height: 40px;
    }

    &:hover {
      background-color: #eee;
    }
  }

}

.iconActive{
  background-color:#eee;
}
</style>
